<div class="containerStyle">
  <h3>描述</h3>
  <p>虚拟滚动是和表头锁定功能搭配使用的。</p>
  <p>虚拟滚动不支持详情展开、数据分组。</p>
  <p>虚拟滚动综合示例，虚拟滚动 + 表头锁定特性 + 列动态显示/隐藏 + 列固定 + 列拖动特性 + 分页特性 + 排序特性 + 表头搜索特性</p>
  <p>
    表格虚拟滚动功能：在有样式类 ti3-table-container 的元素(第二个表格的父容器)上使用 itemSize
    接口设置每条数据占据的高度，并且给其设置最大高度或高度，然后在 div.ti3-table-container > table > tbody > tr 上用 cdkVirtualFor
    替换原有的 ngFor。
  </p>
  <h3>导入</h3>
  <p>import {{ '{' }} TiTableModule, TiOverflowModule, TiPaginationModule {{ '}' }} from '@opentiny/ng';</p>
  <p>使用虚拟滚动需要引入 ScrollingModule 模块， 前提是安装了 @angular/cdk 三方库。</p>
  <p>import {{ '{' }} ScrollingModule {{ '}' }} from '@angular/cdk/scrolling;</p>
  <h3>示例</h3>
  <ti-table
    [(displayedData)]="displayed"
    [srcData]="srcData"
    [columns]="columns"
    [searchWords]="searchWords"
    [searchKeys]="searchKeys"
    tiColsResizable
  >
    <!-- 使用列拖动功能时，需要在ti-table标签上使用tiColsResizable指令。 -->
    <!-- 列动态显示 -->
    <div style="height: 28px; margin-bottom: 10px">
      <!--控制列隐藏/显示-->
      <ti-cols-toggle
        style="float: right"
        [searchable]="searchable"
        [panelWidth]="panelWidth"
        [selectAll]="selectAll"
        [noDataText]="noDataText"
      >
      </ti-cols-toggle>
    </div>
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <ng-container *ngFor="let column of columns;index as i;">
              <!-- 控制列显示/隐藏-->
              <ng-container *ngIf="column.show || column.show === undefined">
                <th *ngIf="i === 0" width="{{column.width}}" [tiColumnFixed]="column.fixed">
                  <ti-cell-text>{{column.title}}</ti-cell-text>
                  <!-- sort接口为排序的属性名(字段，例如‘firstName’)-->
                  <ti-head-sort [sortKey]="column.sortKey"></ti-head-sort>
                </th>
                <th *ngIf="i === 1" width="{{column.width}}" [tiColumnFixed]="column.fixed">
                  <ti-cell-text>{{column.title}}</ti-cell-text>
                  <!--ngModel接口可设置和获取headfilter下拉选中值，ti3-head-filtered样式类是
                                    组件提供的设置有过滤时漏斗的高亮样式，可自定义高亮时机-->
                  <ti-head-filter
                    [options]="column.options"
                    [(ngModel)]="column.selected"
                    [searchable]="column.searchable"
                    (select)="onSelect($event, column)"
                    [ngClass]="{'ti3-head-filtered': column.selected && column.selected.label !== 'all'}"
                  ></ti-head-filter>
                </th>
                <th *ngIf="i >= 2" width="{{column.width}}" tiOverflow [tiColumnFixed]="column.fixed">{{column.title}}</th>
              </ng-container>
            </ng-container>
          </tr>
        </thead>
      </table>
    </div>
    <!-- .ti3-table-container 是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用 .ti3-table-container(表头锁定，虚拟滚动) 和 .ti3-resize-wrapper(列拖动) 样式类。-->
    <!--注意2:在有 .ti3-table-container 样式类的容器上来设置表体的高度或最大高度。-->
    <!--注意3:在有 .ti3-table-container 样式类的容器上使用 itemSize 接口来设置表体每行的高度(单位是px)来开启虚拟滚动。单行表格的每条数据占据高度是 43 px。 -->
    <div class="ti3-table-container ti3-resize-wrapper" itemSize="43" style="max-height: 380px">
      <table>
        <!-- 这里的表头不显示 -->
        <thead>
          <tr>
            <ng-container *ngFor="let column of columns;">
              <!--此处的表头是用来控制各列宽度，实际不显示，所以注意 th 标签内部不要嵌套任何内容。-->
              <th *ngIf="column.show || column.show === undefined" width="{{column.width}}"></th>
            </ng-container>
          </tr>
        </thead>
        <tbody>
          <!--此处需要用 cdkVirtualFor 替换 ngFor, cdkVirtualFor 与 ngFor 的使用方法完全一致。-->
          <tr *cdkVirtualFor="let row of displayed; index as i" id="{{'mytable_data_' + row.id}}">
            <td *ngIf="columns[0].show || columns[0].show === undefined" tiColumnFixed="left" tiOverflow>
              {{row.id + '-' + row.firstName}}
            </td>
            <td *ngIf="columns[1].show || columns[1].show === undefined" tiColumnFixed="left" tiOverflow>{{row.lastName}}</td>
            <td *ngIf="columns[2].show || columns[2].show === undefined" tiOverflow>{{row.age}}</td>
            <td *ngIf="columns[3].show || columns[3].show === undefined" tiOverflow>{{row.balance}}</td>
            <td *ngIf="columns[4].show || columns[4].show === undefined" tiOverflow>{{row.email}}</td>
            <td *ngIf="columns[5].show || columns[5].show === undefined" tiOverflow>{{row.address}}</td>
            <td *ngIf="columns[6].show || columns[6].show === undefined" tiOverflow>{{row.phone}}</td>
            <td *ngIf="columns[7].show || columns[7].show === undefined" tiOverflow>{{row.parents}}</td>
            <td *ngIf="columns[8].show || columns[8].show === undefined" tiColumnFixed="right" tiOverflow>{{row.id + '-' + row.school}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 分页 -->
    <ti-pagination [(currentPage)]="currentPage" [pageSize]="pageSize" [(totalNumber)]="totalNumber"></ti-pagination>
  </ti-table>
</div>
